<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css书写的顺序</title>
    <link rel="stylesheet" href="../css/test23.css">
</head>
<body>
    <!-- 
        1.布局定位属性：display/position/float/clear/visibility/overflow
        (建议display写在第一个  关系到模式)
        2.自身的属性: width/height/margin/padding/border/background
        3.文本属性：color/font/text-decoration/text-align/vertical-align
        /white-space / break-word
        4.其他属性: content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient...
     -->

     <!-- 定位 -->
     <!-- 1.浮动可以让多个块级盒子一行没有缝隙排列显示， 经常用于横向排列盒子。
     2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，
     并且可以压住其他盒子。 -->

     <!-- 
        定位的组成
        定位 = 定位模式 + 边偏移
        定位：将盒子定在某个位置，摆放盒子，按照定位的方式移动盒子
        定位也是用来布局的
        定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置
        边偏移：就是定位的盒子移动的最终的位置。有top,bottom,left,right4个属性
        定位的盒子有了偏移才有价值，一般情况下，凡是有定位的地方，必定有偏移
     -->

     <!-- 定位模式：position属性定义元素的定位模式，语法如下：
     选择器 {
        position: 属性值；
     }
     定位模式有不同的分类，在不同的情况下，用到不同的定位模式
     static / relative / absolute / fixed -->
     

     <!-- 
        固定定位
        <div class="box1"></div> 
    -->
     <!-- 
        static 静态定位 按照标准流特性摆放位置 没有边偏移
        静态定位在布局时基本不使用
      -->

      <!-- 
        相对定位
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div> 
    -->
      <!-- 相对定位是元素在移动时，是相对于他自己原来的位置来说的
      特点：
      1.相对于自己原来的位置来移动的（移动位置的时候参照的是自己原来的位置）
      2.原来的位置在标准流中继续占有，后面的盒子。仍然以标准流的方式对待他
      因此，相对定位并没有托标
      最典型的就是给绝对定位当爹的 
    -->

    <!-- 绝对定位 -->
    <!-- 绝对定位是元素在移动位置的时候，是相对于他的祖先来说的（拼爹行）
    1.完全脱标---完全不占位置
    2.父元素没有定位，则以浏览器为准定位 -->
    <!--  -->
    <!-- <div class="father">
        <div class="son son1">son1</div>
        <div class="son son2">son2</div>
    </div> -->
      
    <!-- 
        父元素有定位：
        元素件依据最近的已经定位的（绝对/相对/固定）
        的父元素（祖先）进行定位

     -->

     <!-- 
        绝对定位的特点：
        如果没有祖先元素或者祖先元素没有定位，一浏览器为基准定位
        如果祖先元素有定位（相对/固定/绝对），则以最近一级的有定位的祖先元素为
        参考点移动位置
        绝对定位不在占有原来的位置，所以绝对定位脱标
        口诀：子绝父相
      -->

      <!-- 
        子级是绝对定位的话，父级要用相对定位。

        因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。
        ①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，
        不会影响其他的兄弟盒子。
        ②父盒子需要加定位限制子盒子在父盒子内显示。
        ③父盒子布局时，需要占有位置，因此父亲只能是相对定位。
       -->

       <!-- 
        相对定位占有位置  绝对定位不占位置，随意摆放
        -->

        <!-- 
            固定定位
            固定定位是元素固定于浏览器可视区的位置
            在浏览器页面滚动的时候元素的位置不会改变
            特点：
            一浏览器的可视窗口为参照点移动元素
            跟父元素没有任何的关系
            不随着滚动条滚动
            固定定位不占据原先的位置
            固定定位是脱标的，其实固定定位也是一种特殊的绝对定位
            完全脱标--完全不占位置
            只认浏览器的可视窗口 --- 浏览器的可视窗口 + 边偏移属性 来设置元素的位置
            跟父元素没有任何的关系，单独使用
            不随滚动条滚动
         -->
        <!-- <div></div>
        <img src="../images/猴子.webp" alt=""> -->


        <!-- 
            粘性定位：
            可以认为是相对定位和固定定位的混合
             选择器 { 
                position: sticky; 
                top: 10px; 
                    }
                    特点：
                    1.一浏览器的可视窗口为参照点移动元素
                    2.粘性定位占有原先的位置
                    3.必需添加top,left,right,bottom其中的一个才有效

                    边偏移需要和定位模式联合使用，单独使用无效；
                    top 和 bottom 不要同时使用；
                    left 和 right 不要同时使用。

         -->

        <div></div>
</body>
</html>